props

主要用于将父组件的数据传递给子组件

使用: 
1. 传

<子组件 属性={值}/>

2. 接收

类组件: this.props

函数组件: 形参props

props注意点: 

1. props是只读的
2. props可以传递任何数据

如何渲染传递的标签
<子组件 xxx={<h1>123</h1>} />
{this.props.xxx}

如何渲染传递的组件
<子组件 yyy={Demo} />
<this.props.yyyy />

如何渲染传递的组件实例
<子组件 zzz={<Demo/>} />
{this.props.zzz}

props的高级用法

1. 批量传递props

<子组件 {...对象}/>

2. props校验
Test组件,要校验一个名叫xxx的属性,要求属性是string.校验的代码如何实现

import PropTypes from 'prop-types'
function Test(){
    return <div></div>
}
Test.propTypes = {
    xxx: PropTypes.string
}

3. props默认值
function Test(){
    return <div></div>
}

Test.defaultProps = {
    xxx: 默认值
}


